<%@page import="java.util.Set"%>
<%@page import="ecom.beans.PurchaseBean"%>
<%@page import="ecom.beans.UserBean"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
    <head>
        <title>Computers</title>
        <link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6-osc.css" />
        <script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

        <script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
        <script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <script type="text/javascript" src="ext/jquery/jquery.equalheights.js"></script>
        <script type="text/javascript" src="ext/jquery/jquery.corner.js"></script>
        <script type="text/javascript" src="ext/js/coin-slider.js"></script>
        <script type="text/javascript" src="ext/js/jcarousellite.js"></script>
        <link rel="stylesheet" type="text/css" href="ext/960gs/960_24_col.css" />
        <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
        <link rel="stylesheet" type="text/css" href="css/constants.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/style_boxes.css"/>
        <link rel="stylesheet" type="text/css" href="css/coin-slider-styles.css"/>
        <link rel="stylesheet" type="text/css" href="css/css3.css"/>
        <script type="text/javascript" src="ext/js/js.js"></script>
        <script>
            $(function() {
                //carousel begin
                $(".carouse2").jCarouselLite({
                    btnNext: ".next",
                    btnPrev: ".prev",
                    speed: 500,
                    crossfade: false,
                    autopagination:false,
                    autoplay: 5000
                });

                //rollover hover
                $(".carousel li").hover(function() { //On hover...

                    var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

                    $(this).find("span").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

                    //Animate the image to 0 opacity (fade it out)
                    $(this).find("b").stop().fadeTo('normal', 1 , function() {
                        // $(this).hide() //Hide the image after fade
                    });
                } , function() { //on hover out...
                    //Fade the image to full opacity
                    $(this).find("b").stop().fadeTo('normal', 1).show();
                });
            }); 
        </script>
        <script>  
            $(document).ready(function(){
                $(".part").hide();
                $(".scroll-interval").hover(function(){
                    $(this).find(".part").fadeIn(400);
                }, 
                function(){
                    $(this).find(".part").fadeOut(400);
                });
            })
        </script>
    </head>
    <body>
        <div class="bg_body row_1">
            <div id="bodyWrapper" class="container_24 ofh">
                <div id="header" class="grid_24">
                    <div class="cl_both">
                        <a class="logo fl_left" href="#"><img src="img/logo.png" alt="Computers" title="Computers" width="300" height="46" /></a>
                        <div class="fl_right navigation_block" align="right">
                            <div class="cl_both ofh">
                                <div class="languages fl_right"><a href="#"><img src="img/icon.gif" alt="English" title=" English " width="28" height="20" /></a>
                                </div>
                                <jsp:include page="currencies.jsp"></jsp:include>
                                </div>
                                <div class="cl_both ofh">
                                    <div class="cart_bg fl_right">
                                        <div>
                                            Votre panier : 
                                            <a href="Controleur?action=getshopping_cart">
                                            <%
                                                Set<PurchaseBean> cart = (Set<PurchaseBean>) session.getAttribute("cart");
                                                if (cart == null) {
                                                    out.print("<strong>0</strong> objet(s)</a>");
                                                } else {
                                                    out.print("<strong>" + cart.size() + "</strong> objet(s)</a>");
                                                }
                                            %>
                                        </a>
                                    </div>
                                </div>                                
                            </div>   
                            <div class="cl_both ofh">
                                <div class="sub fl_right">
                                    <ul class="navigation cl_both">
                                        <%
                                            if (session.getAttribute("user") != null) {
                                                UserBean user = (UserBean) session.getAttribute("user");
                                                out.print("<b><li class='navigation_item'><a>Bienvenue " + user.getPseudo() + "</a></li></b>");
                                                out.print("<li class='navigation_item '><a href='Controleur?action=deposit.jsp'>Déposez de l'argent</a></li>");
                                                out.print("<li class='navigation_item '><a href='Controleur?action=logout'>Déconnectez-cous</a></li>");
                                                out.print("<li class='navigation_item '><a href='Controleur?action=modifaccount'>Modifier un compte</a></li>");
                                            } else {
                                        %>
                                        <li class="navigation_item "><a href="Controleur?action=login.jsp">Connectez-vous</a></li>  
                                        <li class="navigation_item "><a href="Controleur?action=createaccount.jsp">Créer un compte</a></li>
                                        <%}%>
                                    </ul>
                                </div>   
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg_body row_2">
            <div id="bodyWrapper" class="container_24 ofh">
                <div class="main_menu grid_24">
                    <!-- menu cart END-->
                    <div class="menu_extra">  	
                        <ul class="menu fl_left">		
                            <li class="menu_item un selected">
                                <div class="wrapper_menu-t">	
                                    <div class="wrapper_menu-r">		
                                        <div class="wrapper_menu-b">			
                                            <div class="wrapper_menu-l">				
                                                <div class="wrapper_menu-tl">					
                                                    <div class="wrapper_menu-tr">						
                                                        <div class="wrapper_menu-bl">							
                                                            <div class="wrapper_menu-br"><a href="Controleur?action=accueil.jsp">Accueil</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="menu_item ">
                                <div class="wrapper_menu-t">
                                    <div class="wrapper_menu-r">
                                        <div class="wrapper_menu-b">
                                            <div class="wrapper_menu-l">
                                                <div class="wrapper_menu-tl">					
                                                    <div class="wrapper_menu-tr">	
                                                        <div class="wrapper_menu-bl">
                                                            <div class="wrapper_menu-br"><a href="Controleur?action=contact.jsp">Contact</a>
                                                            </div>						
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <!-- menu cart END--> 
                        <div class="menu-right">
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg_body row_2">
                <div id="bodyWrapper" class="container_24 ofh">
                    <div class="tail_searh grid_24">
                        <!-- menu cart END-->
                        <div class="search fl_left ofh">
                            <form name="search" action="Controleur" method="get">
                                <div class="input-width fl_left">
                                    <div class="width-setter">        
                                        <input type=text name="keywords" class="go"  value="Entrer des mots clés ici" onblur="if(this.value=='') this.value='Entrer des mots clés ici'" onfocus="if(this.value =='Entrer des mots clés ici' ) this.value=''"/>
                                        <input type="hidden" name="action" value="search"/>
                                    </div>
                                </div>
                                <input type="image" src="img/button_search_prod.png" alt=""  class="button_search_prod fl_left" />
                            </form>                                        
                        </div>
                    </div>
                </div>
            </div>
